<template>
  <div class="weather-station">
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item><i class="el-icon-tickets"></i> 气象站</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div v-if="weatherStationFlag" class="content">
      <el-row :gutter="20" v-for="(x, i) in weatherStationState" :key="i" class="row">
        <el-col :span="24">
          <x-weather-station :info="x"></x-weather-station>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
 
<script>
import XWeatherStation from './WeatherStationComponent.vue' 
 
export default {
  components: {
    XWeatherStation 
  },
  data() {
    return {
      weatherStationFlag: false,
      weatherStationState: [],
      update: null,
      // 模拟气象站数据 
      mockWeatherStationData: [
        {
          id: "ws_001",
          species: "weather_station",
          name: "1号气象站",
          temperature: "25.3℃",
          humidity: "65%",
          windSpeed: "3.2m/s",
          windDirection: "东南风",
          rainfall: "0.5mm",
          pressure: "1012.5hPa",
          solarRadiation: "850W/m²",
          lastUpdate: new Date().toLocaleTimeString()
        },
        {
          id: "ws_002",
          species: "weather_station",
          name: "2号气象站",
          temperature: "23.8℃",
          humidity: "70%",
          windSpeed: "2.8m/s",
          windDirection: "东风",
          rainfall: "0.2mm",
          pressure: "1013.2hPa",
          solarRadiation: "780W/m²",
          lastUpdate: new Date().toLocaleTimeString()
        },
        {
          id: "ws_003",
          species: "weather_station",
          name: "3号气象站",
          temperature: "26.1℃",
          humidity: "60%",
          windSpeed: "4.0m/s",
          windDirection: "西南风",
          rainfall: "0.8mm",
          pressure: "1011.8hPa",
          solarRadiation: "920W/m²",
          lastUpdate: new Date().toLocaleTimeString()
        }
      ]
    }
  },
  methods: {
    // 模拟获取气象站数据 
    getWeatherStationState() {
      // 模拟API延迟 
      setTimeout(() => {
        // 随机更新一些数据以模拟实时变化 
        this.mockWeatherStationData.forEach(station  => {
          station.temperature  = `${(Math.random()  * 5 + 20).toFixed(1)}℃`;
          station.humidity  = `${(Math.random()  * 20 + 50).toFixed(0)}%`;
          station.windSpeed  = `${(Math.random()  * 3 + 2).toFixed(1)}m/s`;
          station.rainfall  = `${(Math.random()  * 1).toFixed(1)}mm`;
          station.pressure  = `${(Math.random()  * 5 + 1010).toFixed(1)}hPa`;
          station.solarRadiation  = `${(Math.random()  * 300 + 700).toFixed(0)}W/m²`;
          station.lastUpdate  = new Date().toLocaleTimeString();
          
          // 随机风向 
          const directions = ["北风", "东北风", "东风", "东南风", "南风", "西南风", "西风", "西北风"];
          station.windDirection  = directions[Math.floor(Math.random() * directions.length)]; 
        });
        
        this.weatherStationState  = this.mockWeatherStationData; 
        this.weatherStationFlag  = true;
        console.log(' 气象站数据更新:', this.weatherStationState); 
      }, 300);
    },
    
    // 模拟定时更新数据 
    startUpdateInterval() {
      this.update  = setInterval(() => {
        console.log(' 模拟数据更新');
        this.getWeatherStationState(); 
      }, 10000);
    }
  },
  activated() {
    this.getWeatherStationState(); 
    this.startUpdateInterval(); 
  },
  deactivated() {
    clearInterval(this.update); 
  }
}
</script>
 
<style scoped>
  .row {
    margin-bottom: 10px;
  }
</style>